<template>
  <view class="commont">
    <view class="commont_header">
      <text>评论区（{{ total }}）</text>
    </view>
    <scroll-view class="commont_context" scroll-y="true" @scrolltolower="scrolltolowerCommont">
      <view v-for="item in reviewCommonts" :key="item.commentId">
        <view class="commont_user">
          <view class="commont_user_info">
            <image :src="item?.user?.avatarUrl" mode="heightFix"></image>
            <view class="commont_user_infoname">
              <text>{{ item?.user?.nickname }}</text>
              <text class="user_time">{{ item.timeStr }}</text>
            </view>
            <view class="like">
              <text>{{ item.likedCount }}</text>
              <text class="iconfont icon-icon"></text>
            </view>
          </view>
          <view class="user_context">
            {{ item.content }}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  defineProps(['total','reviewCommonts'])
  const emit = defineEmits(['scrolltolower'])
  const scrolltolowerCommont = () => {
    emit('scrolltolower')
  }
</script>

<style lang="scss" scoped>
  .commont{
    height: 1000rpx;
    width: 100%;
    overflow: auto;
    .commont_header{
      position: fixed;
      z-index: 1;
      background-color: #fff;
      width: 100%;
      height: 100rpx;
      padding: 0 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      .commont_header_hot{
        text{
          margin: 0 10rpx;
          color: #aaaa7f;
        }
        .active{
          color: black;
        }
      }
    }
    .commont_context{
      height: 900rpx;
      margin-top: 100rpx;
      box-sizing: border-box;
      padding: 0 20rpx;
      .commont_user{
        .commont_user_info{
          display: flex;
          height: 100rpx;
          align-items: center;
          image{
            width: 60rpx;
            height: 60rpx;
            border-radius: 360px;
          }
          .commont_user_infoname{
            display: flex;
            flex-direction: column;
            margin-left: 20rpx;
            .user_time{
              font-size: 8rpx;
              color: #aaaa7f;
            }
          }
          .like{
            flex: 1;
            text-align: right;
            text{
              margin-left: 10rpx;
            }
          }
        }
        .user_context{
          margin-left: 80rpx;
          font-size: 30rpx;
          border-bottom: 2rpx solid #959897;
          padding: 20rpx 0 50rpx 0;
        }
      }
    }
  }
</style>